<template>
    <el-image :src="list[0]" :preview-src-list="list" fit="cover" :preview-teleported="true" :hide-on-click-modal="true" />
</template>
<script setup>
import { watch } from 'vue';
let props = defineProps({
    // 地址
    src: {
        type: [Array, String],
        required: true
    }
})
let list = (typeof props.src == 'string') ? [props.src] : props.src;
watch(() => props.src, () => {
    list = (typeof props.src == 'string') ? [props.src] : props.src;
})

</script>
<style scoped lang="scss">
.el-image {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 4px;

    :deep(img) {
        transform: scale(1);
        transition: all 0.3s;

        &:hover {
            transform: scale(1.2);
        }
    }

}
</style>